<template>
	
	<view class="container">
		<view class="head" :style="{ backgroundImage: 'url(' + hzhb + ')' }">
			<view class="ad-text u-flex u-row-center"><text>伙伴效益</text></view>
			<view class="u-flex u-row-around ad-foot">
				<view class="u-flex u-row-center">累计收入<text>0.00</text></view>
				<view class="line"></view>
				<view class="u-flex u-row-center">本月收入<text>0.00</text></view>
			</view>
		</view>
		<view class="row-title u-flex u-row-between"><view class="u-flex u-col-center"><image class="u-m-r-10" style="width:35rpx;height:31rpx;" src='../../static/img/cytitle.png'></image>成员</view><view class="u-m-r-10" @click="getQrcode">推广二维码</view></view>
		<view class="list u-border-bottom" v-for="(item,index) in list" :key="index">
			<view class="u-flex u-row-between">
				<view class="u-flex u-row-start u-col-center u-p-20">
					<view @click="detail(item.id)" class="mytupian" :style="{ backgroundImage: 'url('+ (item.logo != undefined ? baseUrl+item.logo : defaultLogo ) + ')' }">
						<image :src="logoMask"></image>
					</view>		
					<view class="size32">
						{{item.name}}
					</view>
				</view>		
			</view>		
		</view>
		<!--裂变公社二维码-->
		<u-popup border-radius="10" v-model="showQrcode"
			@close="close" @open="open" mode="center" 
			length="90%" :mask="mask"
				:closeable="closeable"
			:close-icon-pos="closeIconPos"
		>
			<view class="openbox" style="height: 900rpx">
				<view class="title">我的推广二维码</view>
				<view class="qrcode"><image :src="baseUrl+qrcode"></image></view>
				<view class="number" @click="downLoadQrcode()">下载二维码</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			modeLeft: 'left',
			show: false,
			mode: 'right',
			mask: true, // 是否显示遮罩
			closeable: true,
			closeIconPos: 'top-right',
			showQrcode:false,
			qrcode:'',
			hzhb: '../../static/img/hzhb.png',
			baseUrl:this.$mConfig.baseUrl,
			defaultLogo: this.$mAssetsPath.defaultLogo,
			logoMask: this.$mAssetsPath.logoMask,
			/*滚动分页*/
			list:[]
		};
	},	
	onLoad(){
		this.initPage();
	},
	methods: {	
		async initPage(){
			let result = await this.$apis.myPromote();
			this.list = result.data;
		},
		close() {
			// //////console.log('close');
		},
		open() {
			// //////console.log('open');
		},
		async getQrcode(){
			this.showQrcode = true;
			let result  = await this.$apis.genUserQrcode();
			this.qrcode = result.data;
		},
		detail(e){
			this.$mRouter.push({
				route:this.$mRoutesConfig.releaseNumber,
				query:{
					id:e
				}
			});
		},
		downLoadQrcode(){
			uni.downloadFile({
				url: this.$mConfig.baseUrl + this.qrcode,
				success: (res) =>{
					if (res.statusCode === 200){
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none"
								});
							}
						});
					}
				}
			})
		},
	}
};
</script>


<style scoped lang="scss">
	.head {	background-position:center -100rpx;
		.ad-text {text-align: center;height:215rpx;color: #FFFFFF;font-size: 46rpx;font-weight: 500;}
		.line {width: 2rpx;
		height: 80rpx;
		background: #FFFFFF;
		opacity: 0.2;
		}
		.ad-foot {height:100rpx;line-height: 100rpx;color: rgba($color: #ffffff, $alpha: 0.5);
background: #AE51FF;
			text {padding:0 0 0 30rpx;font-size: 40rpx;color: #FFFFFF;}
		}
	}
	.row-title {padding:34rpx 20rpx;position: relative;
		&:after {
			content:' ';
			position: absolute;
			lefT:0;bottom:0;
			width:100%;
			height:1px;
			background-color:#F4F4F4;
		}
	}
	
	.mytupian {
		position: relative;
		width: 115rpx;
		height: 132rpx;
		margin: 8rpx 28rpx 0 8rpx;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position:center 0;
		background-size: 115% auto;
		display: flex;
		image {
			width: 115rpx;
			height: 132rpx;
			position: absolute;
			left:0;
		}
	}
	.size32 {font-size: 32rpx;}
	.openbox {
		padding:100rpx;
		.title {
			font-size:36rpx;
			padding-bottom:65rpx;
			text-align: center;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:700;
			color:#000;
		}
		.tips {font-size:30rpx;padding-bottom:30rpx;text-align: center;}
		.qrcode {
			width:380rpx;height:380rpx;margin:0 auto;border:1px solid rgba(220,220,220,1);padding:20rpx;
			image {width: 100%;height:100%;}
		}
		.number {margin:70rpx auto;
			width:256rpx;
			height:62rpx;
			line-height:62rpx;
			text-align: center;
			border-radius:12rpx;
			font-size:30rpx;
			color:rgba(93,98,109,1);
		}
	}
</style>
